import React, { memo, useContext } from 'react';
import classNames from 'classnames';

import { TabsContext } from './tabs'

export interface TabItemProps {
  className?: string;
  style?: React.CSSProperties;
  label: string;
  index?: number;
}

const TabItem: React.FC<TabItemProps> = memo(({index, children}) => {
  const context = useContext(TabsContext);
  const classes = classNames('origin-tab-item', {
    'origin-tab-item-active': context.index === index
  });
  return (
    <div className={classes}>
      { children }
    </div>
  )
})

TabItem.displayName = 'TabItem'

export default TabItem;

